<template>
    <div class="divCommomStyle">
      <div class="content">
        <div class="title">
          <span>2019年度运营分析</span>
        </div>
        <div class="circular">
          <div id="circularChart" :style="{width: '100%', height: '100%'}"></div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      circularChart: null,
      colors: []
    }
  },
  mounted () {
    this.initCircularChart()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.circularChart) {
      this.circularChart.resize()
    }
  },
  methods: {
    initCircularChart () {
      let data = [
        {
          name: '重庆',
          value: 54
        }, {
          name: '上海',
          value: 44
        }, {
          name: '广州',
          value: 35
        }]
      let titleArr = []
      let seriesArr = []
      this.colors = [
        ['#389af4', '#dfeaff'],
        ['#ff8c37', '#ffdcc3'],
        ['#ffc257', '#ffedcc'],
        ['#fd6f97', '#fed4e0'],
        ['#a181fc', '#e3d9fe']
      ]
      let _this = this
      data.forEach(function (item, index) {
        titleArr.push({
          text: item.name,
          // left: index * 35 + 10 + '%',
          left: index === 0 ? '20%' : index * 30 + 20 + '%',
          top: '83%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '14',
            color: _this.colors[index][0],
            textAlign: 'center'
          }
        })
        seriesArr.push({
          name: item.name,
          type: 'pie',
          clockWise: false,
          radius: ['30%', '45%'],
          itemStyle: {
            normal: {
              color: _this.colors[index][0],
              shadowColor: _this.colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          // center: [index * 20 + 20 + '%', '50%'],
          center: [index === 0 ? '20%' : index * 30 + 20 + '%', '50%'],
          // center: ['20%', '50%'],
          data: [{
            value: item.value,
            label: {
              normal: {
                formatter: function (params) {
                  return params.value + '%'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold',
                  color: _this.colors[index][0]
                }
              }
            }
          }, {
            value: 100 - item.value,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: _this.colors[index][1]
              },
              emphasis: {
                color: _this.colors[index][1]
              }
            }
          }]
        }
        )
      })
      let option = {
        title: titleArr,
        grid: {
          width: '80%'
          // left: '30',
          // right: '10%'
        },
        series: seriesArr
      }
      this.circularChart = this.$echarts.init(document.getElementById('circularChart'))
      this.circularChart.setOption(option)
      window.addEventListener('resize', () => {
        this.circularChart.resize()
      })
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.divCommomStyle .title{
  height: 30px;
  text-align: left;
}
.divCommomStyle .title span{
  display: inline-block;
  font-size: 14px;
  color: #01c4e0;
}
.divCommomStyle .circular{
  display: flex;
  width: 100%;
  height: calc(100% - 30px);
}
.left{
  flex: 5;
  height: 90%;
}
.circular .text{
  color: #00a2f6;
}
</style>
